<template>
    <div class="container" @click="handleGallaryClick">
        <div class="wrapper">
            <swiper :options="swiperOptions">
                <swiper-slide v-for="(item,index) in imgs" :key="index">
                    <img class="gallary-img" :src="item" />
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
        </div>
    </div>
</template>
<script>
export default {
  name: 'CommonGallary',
  props: {
    imgs: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      swiperOptions: {
        pagination: 'swiper-pagination',
        paginationType: 'fraction',
        observeParents: true,
        observer: true
        // swiper插件只要监听到这个元素或者父级元素发生Dom结构变化，就会自动刷新一次
        // 通过自我刷新 就能解决swiper宽度计算的问题
      }
    }
  },
  methods: {
    handleGallaryClick () {
      this.$emit('close')
    }
  }
}
</script>
<style scoped>
.container >>> .swiper-container{
    overflow: inherit;
}
.container{
    display:flex;
    flex-direction: column;
    justify-content:center;
    z-index:99;
    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background:#000;
}
.wrapper{
    height:0;
    padding-bottom: 100%;
    background:#fff;
}
.gallary-img{
     width:100%;
}
.swiper-pagination{
    color:#fff;
    bottom:-1rem;
}
</style>
